<template>
    <div class="basic">
        <template v-if="emptyContent">
            <div class="empty">
                <empty></empty>
            </div>
        </template>
        <template v-else>
            <div class="basic-head" v-if="showHead">
                <div class="basic-head-title" :class="headTitleClass">
                    <slot name="headTitle"></slot>
                </div>
                <div class="basic-head-tool">
                    <slot slot="tool" v-if="toolslot"></slot>
                    <el-tooltip v-if="showFullScreenBtn"
                                effect="dark"
                                :content="isFullScreen?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                                placement="bottom">
                        <div class="tool" @click="toggleScreen">
                            <i :class="isFullScreen?'icon-tuichuquanping':'icon-quanping'"></i>
                            <span class="tool-title" v-if="showBtnTitle">{{isFullScreen ? "退出全屏" : "全屏"}}</span>
                        </div>
                    </el-tooltip>
                </div>
            </div>
            <div ref="basicBody" class="basic-body"
                 :class="[{'basic-body-no-head': showFoot && !showHead,
                     'basic-body-no-foot': !showFoot && showHead,
                     'basic-body-no-head-foot': !showFoot && !showHead,
                     'control-scroll': controlScroll,
                     'overflow':hiddenScrollY}]">
                <slot></slot>
                <div ref="bodyScrollX" class="basic-scroll-x">
                    <div class="basic-scroll-x_bar">
                        <div ref="bodyScrollThumb" class="basic-scroll-x_bar_thumb"></div>
                    </div>
                </div>
            </div>
            <div class="basic-foot" v-if="showFoot">
                <slot name="foot"></slot>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: "BasicTable",
        provide() {
            const basicTable = {
                initScroll: this.initScroll
            }
            return {
                basicTable
            }
        },
        props: {
            // 自定义菜单
            toolslot: {
                type: Boolean,
                default: false,
            },
            showBtnTitle: {
                type: Boolean,
                default: true,
            },
            // showImportWorkBtn: {
            //   type: Boolean,
            //   default: true,
            // },
            showFullScreenBtn: {
                type: Boolean,
                default: true,
            },
            showFoot: {
                type: Boolean,
                default: true,
            },
            showHead: {
                type: Boolean,
                default: true,
            },
            emptyContent: {
                type: Boolean,
                default: true,
            },
            controlScroll: false,
            hiddenScrollY: {
                type: Boolean,
                default: false,
            },
            headTitleClass: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                isFullScreen: false,
            }
        },
        computed: {
            resize() {
                return this.$store.getters.resize;
            },
        },
        watch: {
            emptyContent(val) {
                if (!val) {
                    this.initScroll();
                }
            },
            resize: function (val) {
                const _this = this;
                this.$nextTick(() => {
                    // 动画影响，缓重置
                    setTimeout(() => {
                        _this.initScroll();
                    }, 300)
                });
            }
        },
        created() {
            this.$keyBoard(this, 'onFullScreen', 27);
            this.$emitter.on("initScroll", () => {
                this.initScroll();
            })
        },
        mounted() {
            this.initScroll();
        },
        methods: {
            // importWork(file, fileList) {
            //   this.$emit("importWork", file, fileList);
            // },
            toggleScreen() {
                this.isFullScreen = !this.isFullScreen;
                this.$emitter.emit("fullScreen", this.isFullScreen);

                this.$nextTick(() => {
                    setTimeout(() => {
                        this.initScroll();
                    }, 1000);
                })
            },
            onFullScreen() {
                if (this.isFullScreen) {
                    this.$nextTick(() => {
                        this.toggleScreen();
                    })
                }
            },
            initScroll() {
                if (!this.controlScroll) {
                    return;
                }
                this.$nextTick(() => {
                    const body = this.$refs["basicBody"];
                    const bodyScrollX = this.$refs["bodyScrollX"];
                    const bodyScrollThumb = this.$refs["bodyScrollThumb"];
                    if (!body) {
                        return;
                    }
                    body.addEventListener("scroll", () => {
                        // 固定滚动条
                        bodyScrollX.style.bottom = (-body.scrollTop) + "px";
                    }, true);
                    bodyScrollThumb.addEventListener("mousedown", (e) => {
                        let initX = e.clientX; // 初始按下的x
                        let initOffsetLeft = bodyScrollThumb.offsetLeft;
                        document.onmousemove = (e) => {
                            let moveX = e.clientX - initX; // 变化的位置
                            let offsetLeft = 0;
                            if (initOffsetLeft + moveX < 0) {
                                offsetLeft = -initOffsetLeft;
                            } else if (initOffsetLeft + moveX + bodyScrollThumb.offsetWidth > bodyScrollX.offsetWidth) {
                                offsetLeft = bodyScrollX.offsetWidth - bodyScrollThumb.offsetWidth - initOffsetLeft;
                            } else {
                                offsetLeft = moveX;
                            }
                            const scrollX_percent = ((offsetLeft + initOffsetLeft) / bodyScrollX.offsetWidth);
                            bodyScrollThumb.style.left = scrollX_percent * 100 + "%";

                            // const actScrollX = bodyScrollX.offsetWidth * scrollX_percent;
                            // 设置各个table滚动
                            const elms = this.$el.querySelectorAll(".vxe-table--body-wrapper");
                            let count = 100;
                            const controlFun = async () => {
                                for await (const elm of elms) {
                                    // count = count + 100;
                                    // await setTimeout(function () {
                                    const table = elm.querySelector("table");
                                    const tableWidth = table.offsetWidth;
                                    const elmScroll = table.parentNode;
                                    // table可滚动宽度
                                    const tableCanScrollWidth = tableWidth - bodyScrollX.offsetWidth;
                                    // bodyScrollThumb 可滚动宽度
                                    const thumbCanScrollWidth = bodyScrollX.offsetWidth - bodyScrollThumb.offsetWidth;

                                    const tableScroll = (scrollX_percent * bodyScrollX.offsetWidth) / thumbCanScrollWidth * tableCanScrollWidth;
                                    elmScroll.scrollLeft = tableScroll;
                                    // elmScroll.parentNode.querySelector(".el-table__header-wrapper").scrollLeft = tableScroll;
                                    // }, count);
                                }
                            };
                            controlFun();
                            return false;
                        };
                        document.onmouseup = (e) => {
                            document.onmousemove = null;
                            document.onmouseup = null;
                        };
                        return false;
                    });

                    this.$nextTick(() => {
                        this.$nextTick(() => {
                            this.$nextTick(() => {
                                this.init();
                            })
                        })
                    })
                })
            },
            init() {
                const bodyScrollX = this.$refs["bodyScrollX"];
                const bodyScrollThumb = this.$refs["bodyScrollThumb"];
                const elms = this.$el.querySelectorAll(".vxe-table--body-wrapper");
                let tableMaxWidth = 0; // 可滚动的宽度  最大的一个
                const scrollWidth = bodyScrollX.offsetWidth;
                for (const elm of elms) {
                    tableMaxWidth = Math.max(elm.querySelector("table").offsetWidth, tableMaxWidth);
                }
                if (tableMaxWidth > scrollWidth) {
                    bodyScrollX.style.visibility = "visible";
                    bodyScrollThumb.style.width = (scrollWidth / tableMaxWidth) * 100 + "%";
                } else {
                    bodyScrollX.style.visibility = "hidden";
                }
                // this.$nextTick(()=> {
                //   this.$nextTick(()=> {
                //     const tableFixedRight = this.$slots.default[0].elm.querySelector(".el-table__fixed-right");
                //     if (tableFixedRight) {
                //       tableFixedRight.style.height = tableFixedRight.offsetHeight + 20 + "px"
                //     }
                //     const tableRight = this.$slots.default[0].elm.querySelector(".el-table__fixed");
                //     if (tableRight) {
                //       tableRight.style.height = tableRight.offsetHeight + 20 + "px"
                //     }
                //   })
                // })
            }
        }
    }
</script>

<style scoped lang="scss">
    $headHeight: 50px;
    $footHeight: 60px;
    .basic {
        width: 100%;
        height: 100%;
        position: relative;
        &-head {
            width: 100%;
            height: $headHeight;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            &:after {
                position: absolute;
                width: 100%;
                height: 1px;
                left: 0;
                right: 0;
                bottom: 0;
                content: "";
                background: #EBEEF5;
                color: #EBEEF5;
            }
            &-title {
                display: flex;
                align-items: center;
            }
            &-tool {
                display: flex;
                align-items: center;
                font-size: 18px;
                font-weight: bold;
                &-ele {
                    font-size: 22px;
                }
            }
        }
        &-body {
            height: calc(100% - #{$headHeight} - #{$footHeight} - 20px);
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            padding-bottom: 20px;
            &-no-head {
                height: calc(100% - #{$footHeight} - 20px);
            }
            &-no-foot {
                height: calc(100% - #{$headHeight} - 20px);
            }
            &-no-head-foot {
                height: calc(100% - 20px);
            }
        }
        &-foot {
            position: relative;
            width: 100%;
            height: $footHeight;
            bottom: 0;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            &:after {
                position: absolute;
                width: 100%;
                height: 1px;
                left: 0;
                right: 0;
                top: 0;
                content: "";
                background: #EBEEF5;
                color: #EBEEF5;
            }
        }
    }

    .tool {
        cursor: pointer;
        margin-left: 14px;
        display: flex;
        align-items: center;
        color: #1e9fff;
        &-title {
            color: #1e9fff;
            font-size: 18px;
            margin-left: 6px;
            font-weight: normal !important;
        }
    }

    .empty {
        height: calc(100% - #{$headHeight} - 20px);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .control-scroll {
        :deep(.vxe-table--body-wrapper, .vxe-table--fixed-left-body-wrapper, .vxe-table--fixed-right-body-wrapper) {
            overflow-x: hidden;
        }
    }

    .basic-scroll-x {
        width: 100%;
        height: 16px;
        position: absolute;
        bottom: 0px;
        /*background: #dd6161;*/
        z-index: 9999;
        visibility: hidden;

        &_bar {
            width: 100%;
            position: relative;

            &_thumb {
                /*background: #1e9fff;*/
                background: #dddee0;
                /*background: rgba(144, 146, 152, 1);*/
                height: 16px;
                width: 100%;
                position: absolute;
                border-radius: 8px;
            }
        }
    }

    .overflow {
        overflow-y: hidden;
    }

</style>
